<template>
  <div class="system-settings">
    <div class="system-settings-switch-content" v-for="(system, index) in systemSettings" :key="index">
      <h2>{{ system.title }}</h2>
      <a-button v-if="index === 2" style="margin-right: 25px" @click="systemTemplateSelection(index)">模板选择</a-button>
      <a-switch v-model="system.vModel" @change="systemSwitchChange"/>
    </div>
    <template>
      <system-template
          :system-template-config.sync="systemTemplateConfig"
          @updateSystemTemplateConfig="updateSystemTemplateConfig"
      />
    </template>
  </div>
</template>

<script>
import {Message} from 'ant-design-vue';
import SystemTemplate from "@/views/admin/systemSettings/components/SystemTemplate";
export default {
  name: "SystemSettings",
  components: {
    SystemTemplate
  },
  data() {
    return {
      systemSettings: [
        {
          title: '是否启用会议管理',
          vModel: false,
        },
        {
          title: '是否启用三公经费控制',
          vModel: false,
        },
        {
          title: '是否启用日志管理',
          vModel: false,
        }
      ],
      systemTemplateConfig: {
        visible: false,
        title: '模板选择',
        templateConfig: [
          {
            title: '上午/下午工作日志模板',
            morning: {
              value: '10:30',
              title: '上午日志推送时间:',
              key: 'morning'
            },
            afternoon: {
              value: '10:30',
              title: '下午日志推送时间:',
              key: 'afternoon'
            }
          },
          {
            title: '一天工作日志模板',
            morning: {
              value: '10:30',
              title: '日志推送时间:',
              key: 'morning'
            },
          }
        ],
        container: () => document.querySelector('.system-settings'),
        ok: this.systemTemplateOk,
        cancel: () => this.systemTemplateConfig.visible = false
      }
    }
  },
  methods: {
    systemTemplateOk() {
      console.log(this);
    },
    updateSystemTemplateConfig({time, index, key}) {
      this.systemTemplateConfig.templateConfig[index][key].value = time;
    },
    systemSwitchChange(value) {
      console.log(value);
    },
    systemTemplateSelection(value) {
      if(!this.systemSettings[value].vModel) {
        Message.warning('选择模板前请开启日志管理');
        return true;
      }
      this.systemTemplateConfig.visible = true;
    }
  }
}
</script>

<style scoped lang="less">
.system-settings {
  .system-settings-switch-content {
    display: flex;
    justify-content: center;
    align-items: center;

    > h2 {
      flex: 3;
    }
  }
}
</style>
